<script setup>
import { ref, onMounted } from "vue";
import {
  confessionListService,
  submitLikeService,
  submitCommentService,
  submitReportService,
} from "@/api/LoveWall.js";
import request from "@/utils/request.js";
import { useTokenStore } from "@/stores/token.js";
import { useUserInfoStore } from "@/stores/userInfo.js";

const confessions = ref([]);
const pageNum = ref(1);
const total = ref(20);
const pageSize = ref(5);
const commentDialogVisible = ref(false);
const hotConfessions = ref([]);
const timeSortedConfessions = ref([]);
const userInfoStore = useUserInfoStore();

const tokenStore = useTokenStore();

const uploadHeaders = {
  Authorization: "Bearer " + tokenStore.getToken(),
};

const getConfessions = async () => {
  let params = {
    pageNum: 1,
    pageSize: 3,
    categoryId: 1, // 将 categoryId 改为整数类型
    approvalStatus: 2,
  };

  let params_t = {
    pageNum: 1,
    pageSize: 100,
    categoryId: 1, // 将 categoryId 改为整数类型
    approvalStatus: 2,
  };

  const response = await request.get("/api/posts/list", {
    params: params, // 将 params 改为对象的 params 字段
    headers: uploadHeaders,
  });

  const response_t = await request.get("/api/posts/list", {
    params: params_t, // 将 params 改为对象的 params 字段
    headers: uploadHeaders,
  });
  hotConfessions.value = response.data.items;
  timeSortedConfessions.value = response_t.data.items;

  console.log(timeSortedConfessions.value);
};

const currentConfession = ref(null);

const openConfessionDialog = (confession) => {
  currentConfession.value = confession;
  commentDialogVisible.value = true;
};

const onSizeChange = (size) => {
  pageSize.value = size;
  getConfessions();
};

const onCurrentChange = (num) => {
  pageNum.value = num;
  getConfessions();
};

const handleLike = (confession) => {
  confession.liked = !confession.liked;
  // 调用点赞服务
  submitLikeService(confession.id, confession.liked);
};

const handleCommentDialog = (confession) => {
  commentDialogVisible.value = true;
};

const handleCommentSubmit = () => {
  // 调用评论服务
  submitCommentService(confessions.value[0].id, comment.value);
  confessions.value[0].comments.push(comment.value);
  commentDialogVisible.value = false;
};

const handleReport = (confession) => {
  // 调用举报服务
  submitReportService(confession.id);
};

const clearComment = () => {
  comment.value = "";
};

onMounted(() => {
  // 初始化时获取表白墙数据
  getConfessions();
});

// Comment data
const comment = ref("");
</script>

<!-- ================================================================================================== -->
<!-- **************************************************************************************************** -->
<!-- ================================================================================================== -->

<template>
  <div>
    <!-- 走马灯形式（热度排序） -->
    <el-carousel :interval="4000" type="card" height="400px" center>
      <el-carousel-item
        v-for="(confession, index) in hotConfessions"
        :key="index"
      >
        <el-card :body-style="{ padding: '0px' }" class="confession-card">
          <div class="confession-content">
            <img :src="confession.image" class="confession-image" />
            <div class="confession-details">
              <p class="confession-title">{{ confession.title }}</p>
              <div class="confession-bottom">
                <time class="confession-time">{{ confession.time }}</time>
              </div>
            </div>
          </div>
        </el-card>
      </el-carousel-item>
    </el-carousel>

    <!-- 卡片形式（按发布时间排序） -->
    <el-row gutter="20">
      <el-col
        :span="8"
        v-for="(confession, index) in timeSortedConfessions"
        :key="index"
      >
        <el-card :body-style="{ padding: '0px' }" class="time-sorted-card">
          <div class="confession-content">
            <img :src="confession.image" class="confession-image" />
            <!-- 修改这里，添加点击事件 -->
            <div
              class="confession-details"
              @click="openConfessionDialog(confession)"
            >
              <p class="confession-title">{{ confession.title }}</p>
              <div class="confession-bottom">
                <time class="confession-time smaller">{{
                  confession.time
                }}</time>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细信息弹窗 -->
    <el-dialog
      v-model="commentDialogVisible"
      title="详细信息"
      width="50%"
      @close="clearComment"
    >
      <div v-if="currentConfession">
        <el-avatar
          :src="
            userInfoStore.info.avatar
              ? userInfoStore.info.avatar
              : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
          "
        />
        <div
          style="font-size: 20px; font-weight: bold"
          v-html="currentConfession.title"
        ></div>
        <time class="confession-time">{{ currentConfession.postTime }}</time>
        <img :src="currentConfession.image" class="confession-imagedialog" />
        <div v-html="currentConfession.content"></div>
        <!-- 其他表白信息... -->
        <!-- 添加点赞、评论、举报按钮 -->
        <div style="margin-top: 15px; text-align: center">
          <el-button
            text
            @click="handleLike(currentConfession)"
            :type="currentConfession.liked ? 'danger' : 'default'"
          >
            {{ currentConfession.liked ? "取消点赞" : "点赞" }}
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<!-- ================================================================================================== -->
<!-- **************************************************************************************************** -->
<!-- ================================================================================================== -->

<style scoped>
.el-card {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.time-sorted-card {
  width: 400px; /* 设置卡片的宽度 */
  text-align: center;
}

.el-carousel__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.confession-card {
  width: 600px; /* 设置卡片的宽度 */
  height: 300px; /* 设置卡片的高度 */
  text-align: center;
}

.confession-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* 缩小图片但保持内容完整 */
}

.confession-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.confession-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.confession-text {
  font-size: 18px;
}

.confession-bottom {
  margin-top: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.confession-time {
  font-size: 16px; /* 调整时间字体大小 */
  color: #999;
}

.confession-time.smaller {
  font-size: 14px; /* 调整较小时间字体大小 */
}

.confession-button {
  padding: 0;
  min-height: auto;
  margin-right: 10px;
}

.confession-comments {
  list-style-type: none;
  padding: 0;
  margin: 10px 0 0;
}

.confession-imagedialog {
  max-width: 100%;
  max-height: 200px;
  display: block;
  object-fit: contain;
}

.confession-image {
  max-width: 250%;
  max-height: 350px;
  display: block;
  object-fit: contain;
}
</style>
